<template>
  <el-card class="box-card-user">
    <h2 class="titleHeader">前端用户管理</h2>
    <EmailPass :emailpassServe="emailpassServe"></EmailPass>
    <el-divider />
    <header>
      <ClearBtn @click="hanleClearSelect">清空选中</ClearBtn>
      <div>
        <el-input placeholder="搜索用户名" style="width: 180px; margin: 0 20px" v-model="username" clearable>
        </el-input>
        <el-input placeholder="搜索邮箱" style="width: 180px; margin: 0 20px" v-model="email" clearable>
        </el-input>
        <el-button :icon="Search" type="primary" @click="getListData">搜索</el-button>
      </div>
    </header>
    <UserList :user-data="userData" @getList="getListData" ref="userLsitRef"></UserList>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @current-change="handleChangePage" :hide-on-single-page="Number(count) < 5" :total="Number(count)"
        :page-size="5" layout="prev, pager, next" />
    </div>
    <!-- 提示框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>确定要删除选中</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="handleDeleteAll"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { defineAsyncComponent, ref } from 'vue'

import { getAllUser, delBatch } from '@/utils/userManageHttp'
import { ElMessage } from 'element-plus'
const ClearBtn = defineAsyncComponent(() => import('@/components/button/ClearBtn.vue'))

const EmailPass = defineAsyncComponent(
  () => import('@/components/frontUser/EmailPass.vue')
)

const UserList = defineAsyncComponent(
  () => import('@/components/frontUser/UserList.vue')
)
const username = ref<string>('')
const email = ref<string>('')
// 传入列表数据
type UserData = {
  avatar?: string
  username?: string
  email?: string
  createTime?: string
  _id?: string
}
const userData = ref<UserData[]>([])
let page = 1
let count = ref<number>(0)
// 获取列表数据
const emailpassServe = ref<string>('JHPPJONKJCJPUDCK')
const getListData = () => {
  getAllUser(page, username.value, email.value).then((res) => {
    count.value = res.data.data.count
    userData.value = res.data.data.data
    emailpassServe.value = res.data.emailpassServe
  })
}
// 先执行一下获取列表数据
getListData()

// 分页切换
const handleChangePage = (currentpage: number): void => {
  page = currentpage
  getListData()
}
// 清空显示输入框
const dialogVisible = ref<boolean>(false)
// 删除提示框
const hanleClearSelect = function () {
  dialogVisible.value = true
}

// 删除多个
const userLsitRef = ref<InstanceType<typeof UserList>>()
const handleDeleteAll = function () {
  dialogVisible.value = false
  if (userLsitRef.value) {
    if (!userLsitRef.value.multipleSelection.length)
      return ElMessage.error('不能一个不选')
    let ids = userLsitRef.value.multipleSelection.map((item) => item._id)
    let files = userLsitRef.value.multipleSelection.map(
      (item) => item.avatar && item.avatar.split('/')[1]
    )
    // 删除多个函数
    delBatch(ids as string[], files as string[]).then((res) => {
      getListData() // 获取列表
    })
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

.box-card-user {
  padding: 0px 20px 40px;

  header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-width: 700px;
  }
}
</style>
